<template>
<div class="app-container">
    <!-- 设置gutter可以控制卡片之间的距离 -->
    <el-row :gutter="20">
        <el-col :span="6">
            <el-card class="box-card">
            <template v-slot:header>
                <div class="clearfix">
                <span>个人信息</span>
                </div>
            </template>
            <div>
            <div class="text-center">
                <avatar :user="currentUser"></avatar>
                </div>
                <ul class="list-group list-group-striped">
                <li class="list-group-item">
                    <svg-icon icon="user"/>&nbsp;&nbsp;用户名称
                <div class="pull-right">{{ currentUser.username }}</div>
                </li>
                <li class="list-group-item">
                    <svg-icon icon="phone"/>&nbsp;&nbsp;手机号码
                <div class="pull-right">{{ currentUser.phonenumber }}</div>
                </li>
                <li class="list-group-item">
                    <svg-icon icon="email"/>&nbsp;&nbsp;用户邮箱
                <div class="pull-right">{{ currentUser.email }}</div>
                </li>
                <li class="list-group-item">
                    <svg-icon icon="peoples"/>&nbsp;&nbsp;所属角色
                <div class="pull-right">{{ currentUser.roles }}</div>
                </li>
                <li class="list-group-item">
                <svg-icon icon="date"/>&nbsp;&nbsp;创建日期
            <div class="pull-right">{{ currentUser.login_date }}</div>
            </li>
            </ul>
            </div>
            </el-card>
            </el-col>
            <el-col :span="18">
            <el-card>
                <template v-slot:header>
                    <div class="clearfix">
                    <span>基本资料</span>
                    </div>
                </template>
                <el-tabs v-model="activeTab">
                <el-tab-pane label="基本资料" name="userinfo">
                    <!-- 将父页面获取到的数据资料传递到子页面上去 -->
                    <userInfo :user="currentUser"></userInfo>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="resetPwd">
                    <resetPwd :user="currentUser"></resetPwd>
                </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script setup>
import {ref} from 'vue'
import avatar from './components/avatar.vue';
import resetPwd from './components/resetPwd.vue';
import userInfo from './components/userInfo.vue';
const currentUser = JSON.parse(sessionStorage.getItem("userInfo"))
const activeTab = ref("userinfo");
</script>

<style lang="scss">
.list-group-striped > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    }
.list-group-item {
    border-bottom: 1px solid #e7eaec;
    border-top: 1px solid #e7eaec;
    margin-bottom: -1px;
    padding: 11px 0;
    font-size: 13px;
}
.pull-right {
    float: right !important;    
}
::v-deep .el-card__body {
    height: 230px;
    }
::v-deep .box-card {
    height: 450px;
}
</style>